<template>
  <div class="login">
    <transition name="el-zoom-in-center">
      <div
        class="login-in"
        v-if="loginis"
        v-loading="loading"
        element-loading-text
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <el-form
          label-position="left"
          label-width="68px"
          class="demo-ruleForm login-container"
          :rules="rules"
          :model="from"
        >
          <div class="title">用户登录</div>
          <el-form-item prop="username" label="账号：">
            <el-input
              type="text"
              v-model="from.username"
              @keyup.enter.native="down"
              placeholder="账号"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password" label="密码：">
            <el-input
              type="password"
              v-model="from.password"
              @keyup.enter.native="down"
              placeholder="密码"
            ></el-input>
          </el-form-item>

          <!-- <el-form-item prop="verifyCode" label="验证码："> -->
          <!-- <el-input type="text" v-model="from.verifyCode"  @keyup.enter.native="down" placeholder="验证码" class="input-yzm"></el-input> -->
          <!-- <el-image @click="changeImage" style="width: 70px; height: 25px" :src="newUrl"></el-image> -->
          <!-- <el-image @click="getUrl" style="width: 70px; height: 25px" :src="newUrl"></el-image> -->
          <!-- </el-form-item> -->
          <el-button type="primary" style="width:100%;" @click.native.prevent="checkUser">登录</el-button>
        </el-form>
      </div>
    </transition>
    <transition name="el-zoom-in-center">
      <setpasswoeld @cancel="cancel" v-if="!loginis" />
    </transition>
  </div>
</template>
<script lang='ts'>
import { Component, Vue, Watch, Prop } from "vue-property-decorator";
import setpasswoeld from "./modules/setpasswoeld.vue";
import { AppModule } from "@/store/modules/app";
import axios from "axios";
@Component({
  components: { setpasswoeld },
})
export default class extends Vue {
  public from = {
    username: "",
    password: "",
    verifyCode: "",
    checkKey: "",
  };
  public loginis = true;
  public loading = false;
  public url: string = "http://oss3.data-bh.com/yzm.png";
  private rules: any = {
    name: [
      { required: true, message: "请输入用户名", trigger: "blur" },
      { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
    ],
    pwd: [
      { required: true, message: "请输入密码", trigger: "blur" },
      { min: 6, max: 15, message: "长度在 6 到 15 个字符", trigger: "blur" },
    ],
    verifyCode: [],
  };

  public checkUser() {
    // this.loading = true;
    // var _this = this;
    this.login();
    // setTimeout(() => {
    //   _this.loginis = !_this.loginis;
    //   _this.loading = false;
    // }, 1000);
    this.$router.push({ path: "homepage" });
  }
  private date = Number(new Date());
  // 监听最新验证码

  get newUrl() {
    // 测试需求 注释掉
    return "";
    // let url =
    //   (window as any).VUE_APP_BASEURL +
    //   "/bdznyjpt-online-monitor/organization/registVerifyCode?key=" +
    //   this.date;
    // return url;
  }
  // 获取验证码
  private getUrl() {
    // console.log("获取验证码");
    this.date = Number(new Date());
    this.from.checkKey = this.date.toString();
    // (this as any).$services
    //   .registVerifyCode({method:'post'}, "/" + Number(new Date()))
    //   .then((result: any) => {
    //     console.log("获取验证码:",result);
    //     // let url = result;
    //     // this.url =
    //   })
    //   .catch((err: object) => {
    //     console.log(err);
    //   });
  }
  //键盘按下
  down(val) {
    console.log(val);
    if (val.key == "Enter") {
      this.checkUser();
    }
  }
  public login() {
    var Myfrom: any = {};
    if (this.from.username == "qwert" && this.from.password == "1qaz2wsx") {
      Myfrom.username = "taian";
      Myfrom.password = "J2lu&U&77";
    } else {
      return this.$message({
        type: "warning",
        message: "用戶名或密码不正确",
      });
    }
    window.sessionStorage.setItem("tabId","/homepage")
    this.loading = true;
    (this as any).$services
      .login({ data: Myfrom, method: "post" })
      .then((result: any) => {
        console.log(result, 456);
        if (result.success) {
          var storage = window.localStorage;
          var userinf = result.data[0];
          var d = JSON.stringify(userinf);
          storage.setItem("userinf", d);
          this.$router.push({ path: "/homepage/index" });
          this.loading = false;
          // 权限接口
          // var handel:any=JSON.stringify({aa:123});
          // storage.setItem("Authority", handel);

          // AppModule.SetAuthority(handel);
          // var url = `/isc/bdznyjpt/iscintegrate/rest/common/menutree/load?userID=8a4197c860bb03330161554dd016003a&systemID=ff8080813ee569f3013eee32fd6f0009&_=1611196318298`;
          // axios.get(url).then((res) => {
          //   console.log(res);
          // });
        } else {
          this.$message({
            type: "warning",
            message: result.message,
          });
          this.loading = false;
        }
      })
      .catch((err: object) => {
        console.log(err);
        this.$message({
          type: "warning",
          message: "登录失败",
        });
        this.loading = false;
      });
    // this.getUrl();
  }

  public cancel() {
    this.loginis = true;
  }

  public changeImage() {
    // console.log("点击换验证码");
    this.getUrl();
  }

  mounted() {
    this.getUrl();
    window.localStorage.Authority = "";
  }
}
</script>
<style lang="scss" scoped>
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  .login-container {
    width: 600px;
    height: 400px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background-clip: padding-box;
    padding: 35px 80px 15px;
    border: 1px solid #2342ae;
    box-shadow: 0 0 25px #0e2162;
    .title {
      margin: 0px auto 20px auto;
      text-align: center;
      color: #fff;
      font-size: 0.24rem;
    }
  }
}
</style>
<style lang="scss">
.login {
  .el-form-item {
    margin-bottom: 30px;
  }
  .input-yzm {
    width: 60%;
  }
  .el-image {
    top: 7px;
    left: 11px;
    cursor: pointer;
  }
}
</style>